<template>
  <div class="chat-login">
    <div class='login-box'>
      <div class='login-form'>
          <span>昵称：</span><input type="text" v-model='name' placeholder='差不多只能显示这么长'>
          <br>
          <span>微信：</span><input type="text" v-model='wechat' placeholder='方便私聊（私聊。选填）'>
          <br>
          <button @click='login'>走你</button>
      </div>
    </div>
  </div>
</template>

<script>
import Chat from '../api/client'

export default {
  name: 'chat-login',
  data () {
    return {
      name: '',
      wechat: '',
      uid: ''
    }
  },
  mounted () {
    this.$nextTick(function () {
      if (localStorage.name) {
        this.$router.push({path: '/room', query: {refresh: true}})
      }
    })
  },
  methods: {
    login () {
      if (!this.name.trim()) {
        alert('咳咳，不知英雄如何称呼？')
        return
      }
      // 获取id，名字+随机数
      this.uid = this.name + '_' + Math.ceil(Math.random() * 10000)
      this.name = this.name.slice(0, 10)
      if (localStorage) {
        localStorage.setItem('name', this.name)
        localStorage.setItem('wechat', this.wechat)
        localStorage.setItem('uid', this.uid)
      }
      Chat.init()
      this.name = ''
      this.wechat = ''
      this.uid = ''
      this.$router.push({path: '/room', query: {refresh: true}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.chat-login{
  text-align:center;
  background: url(../assets/img/mei.jpg);
  background-size: cover;
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
  line-height:25px;
}
.login-box{
  display:table;
  height:100%;
  width:50%;
  margin:0 auto 0;
  box-shadow: 0 0 500px rgba(0, 0, 0, 0.5);
}
.login-form{
  display:table-cell;
  vertical-align:middle;
  background:rgba(255, 255, 255, 0.75);
}
.login-form input{
  line-height:25px;
  margin:0.5em 0;
  padding:0 1em;
}
.login-form button{
  line-height:25px;
  margin:0.5em 0;
  padding:0 1em;
  border:0 none;
  width:30%;
  background: -webkit-linear-gradient(left top, #fff , #3CAF36);
  background: -o-linear-gradient(bottom right, #fff, #3CAF36);
  background: -moz-linear-gradient(bottom right, #fff, #3CAF36);
  background: linear-gradient(to bottom right, #fff , #3CAF36);
}
</style>
